<template>
  <div v-if="props.secondComments && props.secondComments.length">
    <div
        class="sub-reply-container"
        id="child-reply"
        v-for="(child, childIndex) in props.secondComments"
        :key="childIndex"
    >
      <div class="listbox-top-user">
        <el-avatar :size="30" :src="child.avatar" />
        <div style="font-size: 14px; color: #9499a0; text-align: center; height: 40px; line-height: 40px; margin-left: 10px">
          <span>{{ child.createName }}</span>
        </div>
      </div>
      <div class="listbox-middle-root">{{ child.comment }}</div>
      <div class="listbox-bottom">
        <span>发布时间：{{ child.createAt }}</span>
        <!-- 回复的是二级评论 -->
        <span @click="handleReply(child.parentId, child.id)">回复</span>
      </div>
    </div>
  </div>
</template>

<script setup>
// 接收父组件传过来的值：二级留言
const props = defineProps({
  secondComments: {
    type: Array,
    default: [],
  },
});

// 声明需要抛出的事件
const emit = defineEmits(["handle-reply"]);

const handleReply = (rootCommentId, parentId) => {
  // 【注意】这里不以对象形式包裹发送，会导致嵌套；因为父组件中回复一级评论与子级评论共用一个传值方法
  emit("handle-reply", rootCommentId, parentId);
};
</script>

<style scoped>
.sub-reply-container {
  margin: 20px 0 0 65px;
}

.sub-reply-container .listbox-top-user {
  display: flex;
}

.sub-reply-container .listbox-top-user p {
  margin-left: 10px;
  width: 100%;
}

.sub-reply-container .listbox-top-user p span:nth-child(2) {
  margin-left: 5px;
  font-size: 8px;
  padding: 2px;
  color: white;
  border-radius: 5px;
  position: relative;
  bottom: 4px;
}

.sub-reply-container .listbox-middle-root,
.sub-reply-container .listbox-bottom {
  margin-left: 38px;
}

.sub-reply-container .listbox-bottom {
  font-size: 12px;
  color: #9499a0;
  margin: 10px 0 10px 35px;
  display: flex;
}

.sub-reply-container .listbox-bottom span {
  display: block;
  margin-right: 20px;
}

.sub-reply-container .listbox-bottom span:last-child:hover {
  cursor: pointer;
}

</style>
